

<template>
  <el-card>
    <!--条件查询开始-->
    <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="所属部门" prop="deptId">
        <el-select
            v-model="queryParams.deptId"
            placeholder="请选择部门"
            clearable
            size="small"
            style="width:240px">
          <el-option
              v-for="dict in deptOptions"
              :key="dict.deptId"
              :label="dict.deptName"
              :value="dict.deptId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="用户姓名" prop="userName">
        <el-input
            v-model="queryParams.username"
            placeholder="请输入用户姓名"
            clearable
            size="small"
            style="width:240px"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
            v-model="queryParams.phone"
            placeholder="请输入手机号"
            clearable
            size="small"
            style="width:240px"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="queryParams.status"
            placeholder="可用状态"
            clearable
            size="small"
            style="width:240px">
          <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="queryParams.dateRange"
            size="small"
            style="width:240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--条件查询结束-->

    <!-- 表格工具按钮开始 -->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini"  >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="batchDelete()">
          批量删除
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleResetPwd">
              重置密码
          </el-button>
      </el-col> -->
    </el-row>
    <!-- 数据表格开始 -->
    <el-table border :data="userTableList" @selection-change="selectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="邮箱：">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="擅长：">
              <span>{{ props.row.strong }}</span>
            </el-form-item>
            <el-form-item label="荣耀：">
              <span>{{ props.row.honor }}</span>
            </el-form-item>
            <el-form-item label="简介：">
              <span>{{ props.row.introduction }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" align="center" prop="userId"/>
      <el-table-column label="用户姓名" align="center" prop="userName"/>
      <el-table-column label="部门" align="center" prop="deptId" :formatter="deptFormatter"/>
      <el-table-column label="手机号码【登陆身份】" width="180" align="center" prop="phone"/>
      <el-table-column label="性别" align="center" prop="sex" />
      <el-table-column label="年龄" align="center" prop="age"/>
      <el-table-column label="是否排班" align="center" prop="schedulingFlag"
                       />
      <el-table-column label="级别" prop="userRank" align="center"/>
      <el-table-column label="背景" prop="background" align="center" :formatter="backgroundFormatter"/>
      <el-table-column label="状态" prop="status" align="center" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="200"/>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">

        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页控件开始 -->
    <el-pagination
        :current="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :pageSize="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      // 状态字典
      statusOptions: [],
      // 部门字典
      deptOptions: [],
      // 查询参数
      queryParams: {
          pageNum:1,
          pageSize: 5,
      },
      //背景的字典
      backgroundOptions:[],
      //表格数据
      userTableList:[],
      //被选择删除id
      userIds:[],
      selectedRows: [] // 选中的行

    }
  },
  //页面加载完毕执行
  created() {
    //加载所有的部门
    this.loadDept();
    //加载状态的内容
    this.loadStatus();
    //加载所有用户
    this.loadUser();
    //加载所有的背景
    this.loadBackground();
  },
  methods: {
    selectionChange(val){
        this.selectedRows=val;
    },
    //批量删除事件
    batchDelete(){
        this.userIds=this.selectedRows.map(item=>item.userId)
        if(this.userIds.length===0){
           this.$message.warning("请选择被删除的项");
        }else{
           this.$confirm("确认删除选中的"+this.userIds.length+"项吗？","提示",{
              confirmButtonText:"确定",
              cancelButtonText:"取消",
              type:"warning"
           }).then(()=>{
               this.$http.get("/system/user/batchDelete?userIds="+this.userIds).then(resp=>{
                   if(resp.data.code===200){
                       this.$message.success("删除成功");
                       this.loadUser();
                  }else{
                  }
               })
           })
        }
    },

    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.loadUser()
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.loadUser()
    },
    //格式化表格
    deptFormatter(row){
      let deptName="未知";
      this.deptOptions.filter(item=>{
          if(row.deptId===item.deptId){
              deptName=item.deptName;
          }
      })
      return deptName;
    },
    //格式化背景
    backgroundFormatter(row){
      let backgroudName="未知";
      this.backgroundOptions.filter(item=>{
        if(row.background===item.dictValue){
          backgroudName=item.dictLabel;
        }
      })
      return backgroudName;
    },
    //加载用户
    loadUser() {
        this.$http.post("/system/user/listByPage",this.queryParams).then(resp=>{
            this.userTableList= resp.data.data.records;
            this.queryParams.total=resp.data.data.total;
        })
    },
    //加载部门: 排错的步骤 1.浏览器控制台
    loadDept() {
      this.$http.get("/system/dept/list").then(resp=>{
          this.deptOptions=resp.data.data;
      })
    },
    //加载所有的背景
    loadBackground(){
      this.$http.get("/system/dict/data/type/sys_user_background").then(resp=>{
        this.backgroundOptions=resp.data.data;
      })
    },
    //加载状态
    loadStatus() {
        this.$http.get("/system/dict/data/type/sys_normal_disable").then(resp=>{
        this.statusOptions=resp.data.data;
      })
    },
    //重置
    resetQuery() {
      this.queryParams = {}
    },
    handleQuery(){
      this.loadUser();
    }
  }
}
</script>
<style scoped>

</style>